<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>解忧栈-你心中理想的港湾</title>
		<!-- 引入 Bootstrap -->
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
		<!--1.头  -->	
		<div class="col-lg-12">
			<nav class="navbar navbar-default" role="navigation">
			    <div class="navbar-header col-lg-4">
			       <img src="images/logo.PNG" style="height: 60px;"/>
			    </div>
			    <div class="col-lg-offset-4 col-lg-4">
			        <ul class="nav navbar-nav">
			            <li ><a href="index.html">首页</a></li>
			            <li ><a href="circlelist.html">圈子</a></li>
			            <li class="active"><a href="worried.html">忧虑</a></li>
						<li><a href="about.html">关于</a></li>
			        </ul>
			    </div>
			</nav>
		</div>
		<div class="col-lg-12">
				<div class="jumbotron">
					<h1>别怕为时已晚，现在就是最好的开始！</h1>
					<p>
						This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
					</p>
					<p>
						<a class="btn btn-primary btn-large" href="worriedadd.html">发布忧虑</a>
					</p>
				</div>
		</div>			
		
		<div class="col-lg-12">
			<div class="input-group">
				<select class="form-control">
				      <option>圈子-2008</option>
				      <option>圈子-2009</option>
				      <option>圈子-2010</option>
				      <option>圈子-2011</option>
				      <option>圈子-2101</option>
				    </select>
			    <input type="text" class="form-control" placeholder="请输入圈子关键字……">
			    <span class="input-group-addon">搜索</span>
			</div>
		</div>
		<div class="row" >
			<div class="col-lg-4" style="margin-top: 10px;">
				<div class="thumbnail">
					<img alt="300x200" src="http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg" />
								<div class="caption">
									<h3>
										心情很不好
									</h3>
									<p>
										记录生活，记录格局，
									</p>
									<p>圈子-2008</p>
									<p>
										2020年12月28日 17：00
									</p>
								</div>
				</div>
			</div>
			<div class="col-lg-4" style="margin-top: 10px;">
				<div class="thumbnail">
					<img alt="300x200" src="http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg" />
								<div class="caption">
									<h3>
										圈子标题
									</h3>
									<p>
										记录生活，记录格局，
									</p>
									<p>圈子-2008</p>
									<p>
										2020年12月28日 17：00
									</p>
								</div>
				</div>
			</div>
			<div class="col-lg-4" style="margin-top: 10px;">
				<div class="thumbnail">
					<img alt="300x200" src="http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg" />
								<div class="caption">
									<h3>
										圈子标题
									</h3>
									<p>
										记录生活，记录格局，
									</p>
									<p>圈子-2008</p>
									<p>
										2020年12月28日 17：00
									</p>
								</div>
				</div>
			</div>
			<div class="col-lg-4" style="margin-top: 10px;">
				<div class="thumbnail">
					<img alt="300x200" src="http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg" />
								<div class="caption">
									<h3>
										圈子标题
									</h3>
									<p>
										记录生活，记录格局，
									</p>
									<p>圈子-2008</p>
									<p>
										2020年12月28日 17：00
									</p>
								</div>
				</div>
			</div>
			<div class="col-lg-4" style="margin-top: 10px;">
				<div class="thumbnail">
					<img alt="300x200" src="http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg" />
								<div class="caption">
									<h3>
										圈子标题
									</h3>
									<p>
										记录生活，记录格局，
									</p>
									<p>圈子-2008</p>
									<p>
										2020年12月28日 17：00
									</p>
								</div>
				</div>
			</div>
			<div class="col-lg-4" style="margin-top: 10px;">
				<div class="thumbnail">
					<img alt="300x200" src="http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg" />
								<div class="caption">
									<h3>
										圈子标题
									</h3>
									<p>
										记录生活，记录格局，
									</p>
									<p>
										2020年12月28日 17：00
									</p>
								</div>
				</div>
			</div>
		</div>	
		<div class="row">
			<div class="col-lg-12" style="text-align: right;">
				<ul class="pagination" style="margin-right: 50px;">
				    <li><a href="#">上一页</a></li>
				    <li class="active"><a href="#">1</a></li>
				    <li ><a href="#">2</a></li>
				    <li><a href="#">3</a></li>
				    <li><a href="#">4</a></li>
				    <li><a href="#">5</a></li>
				    <li><a href="#">下一页</a></li>
				</ul>
			</div>	
		</div>
		</div>
	</body>
</html>
